<script setup lang="ts">
import { reactive } from 'vue'
import { useToast } from "wot-design-uni";
import type { PasswordDTO } from "@/types/user";
import { modifyPasswordAPI } from "@/api/user";
import { onLoad } from '@dcloudio/uni-app';
import { switchNavBarTheme } from "@/utils/common";

onLoad(() => {
  switchNavBarTheme()
})
const toast = useToast()
const model = reactive<PasswordDTO>({
  oldPassword: '',
  newPassword: '',
  confirmPassword: ''
})
const modify = async () => {
  if (model.oldPassword === '' || model.newPassword === '' || model.confirmPassword === '') return toast.show("密码不能为空")
  const reg = /^[0-9a-zA-Z]{6,20}$/
  const msg = "密码格式不正确，密码为6到20位的数字和大小写字母组合"
  if (!reg.test(model.oldPassword) || !reg.test(model.newPassword) || !reg.test(model.confirmPassword)) return toast.show(msg)
  if (model.newPassword !== model.confirmPassword) return toast.show("新密码和确认密码不一致")
  if (model.oldPassword === model.newPassword) return toast.show("新密码不能与原密码相同")
  const res = await modifyPasswordAPI(model)
  if (res.code === 200) toast.show("修改成功")
  else toast.show(res.msg)
}
</script>

<template>
  <wd-toast />
  <view class="content">
    <wd-form :model="model" custom-class="form">
      <wd-cell-group border>
        <wd-input v-model="model.oldPassword" size="large" clearable showPassword label="原密码" placeholder="请输入原密码"></wd-input>
        <wd-input v-model="model.newPassword" size="large" clearable showPassword label="新密码" placeholder="请输入新密码"></wd-input>
        <wd-input v-model="model.confirmPassword" size="large" clearable showPassword label="确认密码" placeholder="请输入确认密码"></wd-input>
      </wd-cell-group>
    </wd-form>
    <wd-button @click="modify" custom-style="background-color: #2796f2; margin-top: 60rpx; width: 30%" block>修改</wd-button>
  </view>
</template>

<style scoped lang="scss">
.content {
  width: 84%;
  position: relative;
  top: 30rpx;
  margin-left: 3%;
  border-radius: 20rpx;
  background-color: var(--front-color);
  padding: 20rpx 6% 60rpx 4%;
}
</style>